import { View, Text, Picker } from "@tarojs/components";
import {
  AtList,
  AtListItem,
  AtButton,
  AtMessage,
  AtInput,
  AtImagePicker
} from "taro-ui";
import Taro, { useRouter } from "@tarojs/taro";
import { useState, useEffect } from "react";
import { getInspectDataApi, getInspectDoneApi } from "../../../utils/api";

import "./index.scss";

import { baseUrl } from "../../../utils/http";

const Index = () => {
  const router = useRouter();

  const [inspectInfo, set_inspectInfo] = useState({});
  // 检查结果
  const [state, set_state] = useState({});
  const state_list = [
    {
      type: 1,
      name: "正常"
    },
    {
      type: 2,
      name: "发现蚁情"
    },
    {
      type: 3,
      name: "发现蚁情但量不多，需再观察"
    },
    {
      type: 4,
      name: "发现蚁情但已撤离，无需灭杀"
    },
    {
      type: 5,
      name: "装置异常"
    },
    {
      type: 6,
      name: "装置被入侵破坏"
    },
    {
      type: 7,
      name: "装置丢失"
    },
    {
      type: 8,
      name: "装置被移位"
    },
    {
      type: 9,
      name: "其他"
    }
  ];

  // 采取措施
  const [measure, set_measure] = useState({});
  const measure_list = [
    {
      type: 1,
      name: "无操作"
    },
    {
      type: 2,
      name: "简单恢复"
    },
    {
      type: 3,
      name: "替换电池"
    },
    {
      type: 4,
      name: "替换装置"
    },
    {
      type: 5,
      name: "灭蚁"
    },
    {
      type: 6,
      name: "推迟灭蚁(再观察)"
    },
    {
      type: 9,
      name: "其他"
    }
  ];

  // 备注
  const [comment, set_comment] = useState("");

  const [files, set_files] = useState([]);

  const filesChange = files => {
    set_files(files);
  };

  useEffect(() => {
    getData();
  }, []);

  // 获取检查具体信息
  const getData = async () => {
    const res = await getInspectDataApi({
      inspect_id: router.params.id
    });
    if (res.res === 0) {
      set_inspectInfo(res.record);
    } else {
      Taro.atMessage({
        message: res.msg,
        type: "warning"
      });
    }
  };

  // 检查结果变更
  const stateChange = e => {
    set_state(state_list[e.detail.value]);
  };

  // 采取措施变更
  const measureChange = e => {
    set_measure(measure_list[e.detail.value]);
  };

  const changecomment = value => {
    set_comment(value);
  };

  // 确认完成
  const onSubmit = async () => {
    if (files[0]) {
      Taro.uploadFile({
        url: baseUrl + "/append/inspect/done",
        filePath: files[0].url,
        name: "image_file",
        formData: {
          access_token: Taro.getStorageSync("access_token"),
          user_id: Taro.getStorageSync("user_id"),
          inspect_id: router.params.id,
          state: state.type,
          measure_type: measure.type,
          comment: comment
        },
        success(data) {
          const res = JSON.parse(data.data);
          if (res.res === 0) {
            Taro.atMessage({
              message: "确定完成",
              type: "success"
            });
            Taro.navigateBack({
              delta: 1
            });
          } else {
            Taro.atMessage({
              message: res.msg,
              type: "warning"
            });
          }
        }
      });
    } else {
      const res = await getInspectDoneApi({
        inspect_id: router.params.id,
        state: state.type,
        measure_type: measure.type,
        comment: comment
      });
      if (res.res === 0) {
        Taro.atMessage({
          message: "确定完成",
          type: "success"
        });
        Taro.navigateBack({
          delta: 1
        });
      } else {
        Taro.atMessage({
          message: res.msg,
          type: "warning"
        });
      }
    }
  };

  return (
    <View className="inspect-done">
      <Picker mode="selector" disabled>
        <AtList>
          <AtListItem title="工程名称" extraText={inspectInfo.project_name} />
        </AtList>
      </Picker>
      <Picker mode="selector" disabled>
        <AtList>
          <AtListItem title="布点名称" extraText={inspectInfo.point_name} />
        </AtList>
      </Picker>
      <Picker
        mode="selector"
        range={state_list}
        onChange={stateChange}
        rangeKey="name"
      >
        <AtList>
          <AtListItem title="检查结果" extraText={state.name} />
        </AtList>
      </Picker>

      <Picker
        mode="selector"
        range={measure_list}
        onChange={measureChange}
        rangeKey="name"
      >
        <AtList>
          <AtListItem title="采取措施" extraText={measure.name} />
        </AtList>
      </Picker>

      <AtInput
        name="comment"
        title="备注信息"
        type="text"
        placeholder="请输入备注信息"
        value={comment}
        onChange={changecomment}
      />

      <View
        className="at-input"
        style={{
          display: "flex",
          justifyContent: "space-between",
          width: "100%"
        }}
      >
        <Text>工程图片</Text>
        <AtImagePicker
          multiple={false}
          count={1}
          files={files}
          onChange={filesChange}
          name="image_file"
          length={1}
        />
      </View>

      <AtButton type="primary" onClick={onSubmit}>
        确认完成
      </AtButton>
      <AtMessage />
    </View>
  );
};

export default Index;
